<template>
	<view class="cunminyishi-details m-h100 bgcolor1 p-2">
		<view class="text-center fs-32 font-weight-bolder">{{details.title}}</view>
		<view class="fs-24 ftcolor4 mb-3">{{details.created_at}}</view>
		<view style="min-height: 400rpx;">
			<view class="fs-24 ftcolor1">{{details.content}}</view>
			<view class="flex flex-column">
				<image class="w-100 flex" v-for="(item,index) in details.img" :key="index" :src="item" mode="widthFix"></image>
			</view>
		</view>

		<view class="mt-5">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">评论</view>
			<view class="flex mb-2" v-for="(item,index) in dataList" :key="index">
				<image class="avatar" src="/static/images/avatar.jpg" mode="widthFix"></image>
				<view class="flex flex-column">
					<view class="ml-2 flex flex-column" @click="clickreplay(item)">
						<text class="fs-24 ftcolor4">{{item.member.name}}</text>
						<view class="flex flex-wrap">
							<text class="fs-20 ftcolor1 mr-2">{{item.comment}}</text>
							<text class="fs-20 ftcolor4">{{item.created_at}}</text><text class="ml-2 fs-20 ftcolor1">回复</text>
						</view>
					</view>
					<template v-if="item.child_comments.length">
						<view class="flex flex-column">
							<view class="ml-2 flex flex-column" v-for="(child,index) in item.child_comments" :key="" @click="clickreplay(child)">
								<text class="fs-24 ftcolor4">{{child.member.name}}</text>
								<view class="flex flex-wrap">
									<text class="fs-20 ftcolor1 mr-2">{{child.comment}}</text>
									<text class="fs-20 ftcolor4">{{child.created_at}}</text><text class="ml-2 fs-20 ftcolor1">回复</text>
								</view>
							</view>
						</view>
					</template>
				</view>
				
			</view>
			<noneBox v-if="dataList.length === 0"></noneBox>
		</view>
		<view style="height: 100rpx;"></view>
		<!--输入-->
		<view
			class="border-top pt-1 pb-2 px-2 position-fixed left-0 right-0 bottom-0 flex align-center justify-between bgcolor1">
			<view class="bgcolor9 rounded-circle px-1 flex-1 mr-2">
				<u--input :focus="focus" autoBlur ref="inputmsg" placeholder="说点什么..." prefixIcon="edit-pen" prefixIconStyle="font-size: 24rpx;color: #909399"
					v-model.trim="wathsay" fontSize="10px" border="none" clear @blur="focus = false" @confirm="sendMsg"></u--input>
			</view>
			<view class=" sendbtn flex align-center justify-center mr-2 " :class="wathsay?'bgcolor2 text-white':'bgcolor9 '" @click="sendMsg">
				<text class="icon-fabu iconfont fs-24"></text></view>
			<u-icon :name="details.mzan>0?'heart-fill':'heart' " @click="likes" :color="details.mzan>0?'#dd6161':'#c8c9cc'"></u-icon>
		</view>
	</view>
</template>

<script>
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				wathsay: '',
				details: {},
				dataList: [],
				tempList: [],
				page: 1,
				replay:null,
				focus:false
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.$route.query.title
			});
			this.details = uni.getStorageSync('cunminyishidetails')
			this.uni_cmys_comment()
		},
		methods: {
			uni_cmys_comment() {
				serviceApi.uni_cmys_comment({
					page: this.page,
					limit: 15,
					cmys_id:this.details.id
				}).then(res => {
					this.tempList = res.data
					if (this.page === 1) {
						this.dataList = res.data
					} else {
						this.dataList = this.dataList.concat(res.data)
					}
				})
			},
			sendMsg(){
				if(!this.wathsay)return
				serviceApi.uni_cmys_comment_act({
					gzh_cmys_id:this.details.id,
					p_comment_id:this.replay|| 0,
					comment:this.wathsay,
				}).then(res => {
					uni.showToast({
						title:res.msg
					})
					this.wathsay = ''
					this.uni_cmys_comment()
				})
			},
			likes(){
				if(this.details.mzan > 0)return
				serviceApi.uni_cmys_dianzan_act({
					gzh_cmys_id:this.details.id,
				}).then(res => {
					uni.showToast({
						title:res.msg
					})
					this.details.mzan = 1
					uni.setStorageSync('cunminyishidetails',this.details)
				})
			},
			clickreplay(item){
				this.replay = item.id
				this.focus = true
			}
		}
	}
</script>

<style lang="scss">
	.cunminyishi-details {
		.avatar {
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}

		.sendbtn {
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}
	}
</style>